<template>
  <base-container>
    <avue-table-search
      :key="`search-${tabStatus}`"
      v-model="searchParams"
      :option="searchOption"
      @search-change="loadTableSearch"
      @search-reset="loadTableSearchReset"
    >
      <template #menu-after>
        <!-- 其他按钮 -->
        <el-button>导出</el-button>
      </template>
    </avue-table-search>
    <base-table-card>
      <avue-crud
        ref="crudRef"
        :option="tableOption"
        :data="tableData"
        v-model="formData"
        :page="page"
        :table-loading="tableLoading"
        @refresh-change="loadGetTableData"
        @current-change="loadTablePageChange"
        @size-change="loadTablePageSizeChange"
      >
        <template #smsSendStatus="{ row }">
          <el-tag v-if="row.smsSendStatus === '0000'" type="success">发送成功</el-tag>
          <el-tag v-if="row.smsSendStatus === '0003'" type="info">未知</el-tag>
          <el-tag v-if="row.smsSendStatus === '0002'" type="warning">发送中</el-tag>
          <el-tag v-if="row.smsSendStatus === '0001'" type="danger">发送失败</el-tag>
        </template>
        <template #bizId-header>
          <div class="flex items-center justify-center">
            关联订单
            <el-tooltip
              class="box-item"
              effect="dark"
              content="关联订单是指当前应用的消费是在该订单中操作产生的"
              placement="top-start"
            >
              <img src="@/assets/application/question.png" class="w-14px h-14px ml-3px" alt="" />
            </el-tooltip>
          </div>
        </template>
      </avue-crud>
    </base-table-card>
  </base-container>
</template>

<script setup>
  import Option from "@/crudOption/application/sms";
  import useCrudHook from "avue-table/useCrudHook";
  const { userInfo } = useUserInfoStore();
  console.info("userInfo", userInfo);
  const tabStatus = ref();

  // 配置
  const { searchOption, tableOption } = Option();
  let {
    data: tableData,
    loading: tableLoading,
    page,
    search: searchParams,
    form: formData,
    get: loadGetTableData,
    pageNumChange: loadTablePageChange,
    pageSizeChange: loadTablePageSizeChange,
    searchReset: loadTableSearchReset,
    searchChange: loadTableSearch,
  } = useCrudHook({
    get: Api.application.shopSpendSmsPage,
    // 查询参数格式化
    getParamsFormat: p => {
      const params = { ...p };
      if (Array.isArray(params.execTime) && params.execTime.length === 2) {
        params.execBeginTime = params.execTime[0];
        params.execEndTime = params.execTime[1];
      }
      delete params.execTime;
      if (Array.isArray(params.reportTime) && params.reportTime.length === 2) {
        params.reportBeginTime = params.reportTime[0];
        params.reportEndTime = params.reportTime[1];
      }
      delete params.reportTime;
      params.tenantId = userInfo.tenantId;
      params.serviceCategoryId = 4;
      params.shopId = userInfo.shopId;
      console.info("getParamsFormat", params);
      return params;
    },
  });
  onMounted(async () => {
    await loadGetTableData();
  });
</script>
<style lang="scss" scoped>
  .content {
    background: linear-gradient(175deg, var(--bd9) 2%, var(--fl7) 14%);
    border: 1px solid #ffffff;
  }
  .sms-card {
    border-radius: 8px;
    border-bottom: 1px solid var(---bd8, #ece4ff);
    background: linear-gradient(180deg, #f4f0ff 0%, #fff 28.37%);
    padding: 16px;
  }
  .bg1 {
    border-radius: 8px;
    border-bottom: 1px solid var(---lk8, #bae0ff);
    background: linear-gradient(180deg, #e6f4ff 0%, #fff 28.37%);
  }
  .sms-stat {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .sms-stat-num {
    font-size: 32px;
    font-weight: bold;
    color: #222;
    margin-bottom: 4px;
  }
  .sms-stat-label {
    font-size: 14px;
    color: #888;
  }
  .buy-btn {
    background: #5c4cf5;
    color: #fff;
    font-size: 18px;
    font-weight: bold;
    border: none;
    border-radius: 8px;
    padding: 12px 48px;
    cursor: pointer;
    transition: background 0.2s;
  }
  .buy-btn:hover {
    background: #4736d7;
  }
</style>
